<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #showColor {
            position: relative;
            width: 30px;
            height: 30px;
            background-color: gray;
        }

        #colorpiker {
            position: absolute;
            width: 280px;
            height: 270px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            border: 1px solid rgba(222, 228, 238, 1);
            /* top:10px; */
        }

        .left-palette {
            position: absolute;
            display: inline-block;
            width: 242px;
            height: 162px;
            bottom: 42px;
            left: 10px;
            background-color: rgb(255, 0, 0);
        }

        .left-palette .left-palette-black {
            background: linear-gradient(0deg, #000, transparent);
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .color-picker-getpoint{
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: transparent;
            border: 1px solid #fff;
            border-radius: 50%;

        }
        .left-palette .left-palette-white {
            background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .left-palette .spot {
            position: absolute;
        }

        .right-palette {
            position: absolute;
            display: inline-block;
            left: 262px;
            width: 10px;
            height: 160px;
            bottom: 42px;
            background: linear-gradient(180deg, red 0, #ff0 17%, lime 33%, cyan 50%, blue 67%, #f0f 83%, red);
        }

        .right-palette .rule {
            position: absolute;
            top: 10px;
            left: -3px;
            width: 100%;
            height: 4px;
            background-color: rgba(255, 255, 255);
            cursor: pointer;
            width: 16px;
            height: 4px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
            border-radius: 1px;
        }

        .tone {
            position: absolute;
            left: 10px;
            bottom: 10px;
            width: 80px;
            height: 25px;
        }

        .rgb-inner {
            position: absolute;
            line-height: 25px;
            bottom: 10px;
            left: 10px;
            font-size: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            text-align: left;
            width: 100px;
            text-indent: 10px;
            height: 24px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(196, 202, 215, 1);
        }

       

        .color-picker-style {
            position: absolute;
            width: 100%;
            height: 68px;
        }

        .color-picker-str {
            position: absolute;
            top: 16px;
            left: 10px;
            width: 36px;
            height: 12px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 12px;
        }

        .color-picker-list {
            position: absolute;
            left: 12px;
            bottom: 20px;


        }

        .color-picker-point {
            list-style: none;
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-left: 20px;
            cursor: pointer;
        }

        .color-add-style::before {
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: block;
            margin-left: -5px;
            margin-top: -5px;          
            border: 1px solid rgba(196, 202, 215, 1);
          
        }

        .color-picker-point:nth-child(1) {
            background-color: #3598DB;
            margin-left: 0;
        }

        .color-picker-point:nth-child(2) {
            background-color: #F5A623;
        }

        .color-picker-point:nth-child(3) {
            background-color: #5991FF;
        }

        .color-picker-point:nth-child(4) {
            background-color: #78D140;
        }

        .color-picker-point:nth-child(5) {
            background-color: #FD6654;
        }

        .color-picker-point:nth-child(6) {
            background-color: #5AC8FA;
        }

        .color-picker-point:nth-child(7) {
            background-color: #15D0BD;
        }

        .color-picker-point:nth-child(8) {
            background-color: #5856D6;
        }

        .color-submit {
            position: absolute;
            text-align: center;
            bottom: 10px;
            right: 10px;
            width: 48px;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(196, 202, 215, 1);
        }

        .color-cancel {
            position: absolute;
            text-align: center;
            bottom: 10px;
            right: 68px;
            width: 48px;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(196, 202, 215, 1);
        }
    </style>
</head>

<body>
    <div id="showColor"></div>
    <div id="colorpiker">
        <!-- <div id="color_picker_style" class="color-picker-style">
            <span class="color-picker-str" >推荐色</span>
            <ul class="color-picker-list">
                <li class="color-picker-point color-add-style"></li>
                <li class="color-picker-point color-add-style"></li>
                <li class="color-picker-point color-add-style"></li>
                <li class="color-picker-point color-add-style"></li>
                <li class="color-picker-point color-add-style"></li>
                <li class="color-picker-point color-add-style"></li>
                <li class="color-picker-point color-add-style"></li>
                <li class="color-picker-point color-add-style"></li>
            </ul>
        </div> -->
        <!-- <div class="left-palette" id="left_palette">
				<div class="left-palette-black"></div>
				<span class="spot" id="palette_spot"></span>
			</div>
			<div class="right-palette" id="right_palette">
				<span class="rule" id="palette_rule"></span>
			</div>
			<div class="tone" id="tone"></div>
            <div id="rgbInner"></div> -->
        <!-- <div id="color_cancel" class="color-cancel">取消</div>
        <div id="color_submit" class="color-submit">确定</div> -->
    </div>
    
    <script src="./end.js"></script>
    <script type="text/javascript">    
        var a = new oColorpiker();
  
        
       
        // console.log(a.color_cancel.innerHTML);
       


        

    </script>
</body>

</html>